<template>
  <div class="need-detail flex">
    <back />
    <div class="detail">
      <el-card>
        <template #header>
          <div class="flex card-title">
            <h2>{{ needDetail?.title }}</h2>
            <el-button @click="doContact" type="primary" size="large"> 联系我们 </el-button>
          </div>
        </template>
        <div class="card-body flex">
          <div class="flex f-d-c f-2">
            <div class="budget">
              <span class="color-gray">投入预算：</span>
              <span class="price">
                {{ needDetail?.budget }}{{ needDetail?.budget === '面议' ? '' : '万' }}
              </span>
            </div>
            <div class="p-t-10 p-b-10">
              <span class="color-gray">发布时间：</span>
              <span>{{ needDetail?.createTime }}</span>
            </div>
            <div>
              <span class="color-gray">截止时间：</span>
              <span>{{ needDetail?.deadline?.split(' ')[0] }}</span>
            </div>
          </div>
          <div class="flex f-d-c f-3">
            <div>
              <span class="color-gray">需求类型：</span>
              <span>{{ needDetail?.requirementType }}</span>
            </div>
            <div class="p-t-10 p-b-10">
              <span class="color-gray">所在地：</span>
              <span>{{ needDetail?.location?.join('/') }}</span>
            </div>
            <div class="industry-sector flex">
              <span class="color-gray f-s-0">标签：</span>
              <el-tag v-for="(item, index) in needDetail?.industrySector" :key="index">
                {{ item }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-card>
      <publish-info :user="user" />
      <el-card class="m-t-20">
        <template #header>
          <h3>需求介绍</h3>
        </template>
        <div v-html="needDetail?.content" class="wang-editor-html"></div>
      </el-card>
    </div>
    <div class="recomment f-s-0 m-l-10 m-r-10">
      <h2 class="recomment-title m-b-10">推荐需求</h2>
      <div
        @click="toRecommendDemandDetail(item.id)"
        v-for="item in recommendList"
        :key="item.id"
        class="recomment-item m-b-10 c-p"
      >
        <h3>{{ item.title }}</h3>
        <div class="location m-t-10 m-b-10">
          <span class="color-gray">所在地：</span>
          <span>{{ item.location?.join(' / ') }}</span>
        </div>
        <div class="recomment-item-footer">
          <div class="requirement-type">
            <span class="color-gray">需求类型：</span>
            <span>{{ item.requirementType }}</span>
          </div>
          <div class="budget">
            <span class="color-gray">预算：</span>
            <span>{{ item.budget }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 私信的对话框 -->
    <chatDialog ref="chatDialogRef" :user="user" />
  </div>
</template>

<script setup lang="ts">
import { reqGetDemandDetail, reqGetDemandRecommend } from '@/api/technology-transform';
import back from '@/components/back/index.vue';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import publishInfo from '@/components/publisher-info/index.vue';
import { ElMessage } from 'element-plus';
import chatDialog from '@/components/chat-dialog/index.vue';
import { getLoginUserId } from '@/utils/storage';

const needDetail = ref();
const user = ref<any>({});
const recommendList = ref();

const route = useRoute();
onMounted(() => {
  const nId: string = route.query.nId as string;
  getDemandDetail(nId);
  getDemandRecommend(nId);
});

function getDemandDetail(nId: string) {
  reqGetDemandDetail(nId).then((res: any) => {
    if (res.code === 200) {
      needDetail.value = res.data;
      user.value = res.data.user;
    }
  });
}

function getDemandRecommend(nId: string) {
  reqGetDemandRecommend(nId).then((res: any) => {
    if (res.code === 200) {
      recommendList.value = res.data?.list;
    }
  });
}

const router = useRouter();
// 跳转到推荐成果详情
function toRecommendDemandDetail(id: string | number) {
  router.push({
    name: 'needDetail',
    query: {
      aId: id,
    },
  });
}

watch(
  () => route.query.aId,
  (newAId: any) => {
    // 如果id存在，才推荐，否则，当返回时，id也修改了，新id为undefined
    if (newAId) {
      // 获取需求详情
      getDemandDetail(newAId);
      // 获取推荐需求
      getDemandRecommend(newAId);
    }
  }
);

const chatDialogRef = ref<InstanceType<typeof chatDialog> | null>(null);
function doContact() {
  if (!user.value) {
    ElMessage({
      message: '该需求没有关联用户',
      type: 'error',
    });
    return;
  }
  if (user.value.userId === getLoginUserId()) {
    ElMessage({
      message: '不能将消息发给自己！',
      type: 'error',
    });
    return;
  }
  if (chatDialogRef.value) {
    chatDialogRef.value.dialogFormVisible = true;
  }
}
</script>

<style lang="scss" scoped>
.need-detail {
  .detail {
    flex: 1;
    .card-title {
      justify-content: space-between;
      align-items: center;
    }
    .industry-sector {
      flex-wrap: wrap;
      .el-tag {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
  .recomment {
    width: 350px;
    &-title {
      background-color: #fff;
      padding: 10px;
      padding-left: 20px;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        width: 5px;
        height: 1em;
        background-color: #409eff;
      }
    }
    &-item {
      background-color: #fff;
      padding: 10px;
      &-footer {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
